<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>testDemo</title>
		<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
		<script src="EasyUI/jquery.min.js"></script>
		<script src="EasyUI/jquery.easyui.min.js"></script>
		<script src="echartsdist/echarts.js"></script>
		<style type="text/css">
		#main{
			margin:30px auto;
			width: 980px;
			height: 400px;
		}
			.slider-ver{
				float: left;
				width: 50px;
				height: 350px;
				border: #ccc thin solid;
				border-radius: 3px;
				padding: 5px 30px;
				margin:10px 3px;
				position: relative;
			}
			#slideArea{
				float: left;
				width: 600px;
			}
			#slideArea .headtxt{
				position: absolute;
				top: -15px;
				color: #333;
				font-size: 16px;
			}
			#slideArea .valtext{
				height:30px;
				line-height: 30px;
				color: #FF6000;
				/*text-align: center;*/
				font-size: 16px;
				font-weight: bold;
				margin: 3px 0px;
			}
			/*#windspd,#tempe,#presure,#humidity,#rain{
				height: 270px;
			}*/
		</style>
		<script>
			$(function(){
				
			//配置echarts路径
			require.config({
				paths:{
					echarts:'echartsdist'
				}
			});
			//使用echarts
			require(
				['echarts','echarts/chart/gauge','echarts/chart/bar','echarts/chart/line'],
				function(ec){
					var myChar = ec.init(document.getElementById("echartArea"));
					var options = {
						tooltips:{
							show:true,
							trigger: 'item', //axis
							formatter:"{a}<br/>{b}:{c}"
						},
						toolbox: {
        					show : true,
        					x:"center",
        					y:"top",
        					feature : {
            					//mark : {show: true},
            					//dataView : {show: true, readOnly: false},
            					//magicType : {show: true, type: ['line', 'bar']},
            					//restore : {show: true},
            					//saveAsImage : {show: true}
        					}
    					},
    					series:[{
							name:"风向",
							type:"gauge",
							title:{
								show : false,
    							offsetCenter: ['-80%', '-100%'],   //0为中心 往上和左为负
							    textStyle: {
							        color: '#333',
							        fontSize : 15
							    }
							},
							center: ['50%','50%'],    //中心在左上角
							radius:[0,'96%'],  //[内半径，外半径]
							startAngle:270,  //开始角度 默认225
							endAngle:-90,	//结束角度默认-45
							min:0,
							max:360,
							splitNumber:8,  //总体标值的刻度分割数量，默认10
							detail:{    	//设置当前值的属性
								show : false,
    							backgroundColor: 'rgba(0,0,0,0)',
    							borderWidth: 0,
    							borderColor: '#ccc',
    							width: 100,
    							height: 40,
								formatter:function(v){    //TODO 有待修改getVal成范围的
									return getVal(v)+"风";
								},  //'{value}°C'
								offsetCenter: ['-70%', '90%'],
								textStyle: {
        							color: 'auto',
        							fontSize : 26
    							}
							},
							pointer:{
								length : '80%',
							    width : 8,
							    color : '#369'    //'auto'
							},
							axisLine:{    //坐标轴线\表盘属性
								show: true,
							    lineStyle: {
							        color: [
							            /*[0.2, '#228b22'],     
							            [0.8, '#48b'],	   
							            [1, '#ff4500']*/
							           [0,'#49c'],
							           [1,'#49c']
							        ], 
							        width: '100%'
							    }
							},
							axisLabel:{    //刻度值
								show: true,
							    formatter: function(v){
							    	return getVal(v);
							    },
							    interval:'auto',    
						//0显示全部刻度值  auto隐藏显示不下的，function(index,data[index])返回true则显示
							    rotate:-90,    //-90~90   无效？
							    margin:10,		//无效？
							    clickable:true,	//无效？
							    textStyle: {
							        color: '#fff'    //auto
							    }
							},
							axisTick:{    //表盘刻度属性
								show: true, 
							    splitNumber: 5,     //两个标值之间的小刻度数
							    length :5, 
							    lineStyle: {
							        color: '#eee',
							        width: 1,
							        type: 'solid'
							    }
							},
							data:[{
								value:45,
								name:"风向标"
							}]
						}]
					};
					myChar.setOption(options);
					
				}//end function
			);//end required
			
			function getVal(v){
				//console.log("come in"+(v=='45'));
				switch (v+''){
				case '45': return '西南';
				case '90': return '西';
				case '135': return '西北';
				case '180': return '北';
				case '225': return '东北';
				case '270': return '东';
				case '315': return '东南';
				case '360': return '南';
				default: return '';
			}};
			/*********************滑条 slider**********************/
			var sliderVal = [70,35,50,10050,85];  //风速 温度 湿度 气压 降水量
			var rules = [0,10,20,30,40,50,60,70,80,90,100];
			
			//slider通用函数：sliderID，值，单位，方向(h,v)，刻度([数组])，显示值变化的容器ID
			function setSlider(_SID,_val,_unit,_dir,_rules,_valDiv,_min,_max,_step){
				$(_valDiv).html(_val+_unit);
				$(_SID).slider({    
		    		mode: _dir,
		    		showTip:true,
		    		value:_val,
		    		tipFormatter: function(value){    
		        		return value + _unit;    
		    		},
		    		onSlideStart:function(newval){
		    			$(_SID).slider('reset');
		    			return false;
		    		},
		    		onSlideEnd:function(newval){
		    			$(_SID).slider('reset');
		    			return false;
		    		},
		    		onComplete:function(newval){
		    			$(_SID).slider('reset');
		    			$(_valDiv).html(_val+_unit);
		    			return false;
		    		},
		    		onChange: function(value){
						$(_valDiv).text(value+_unit);
					},
					rule:_rules,
					min:_min,
					max:_max,
					step:_step,
					converter:{
						toPosition:function(value, size){
							var opts = $(this).slider('options');
							return (value-opts.min)/(opts.max-opts.min)*size;
						},
						toValue:function(pos, size){
							var opts = $(this).slider('options');
							return opts.min + (opts.max-opts.min)*(pos/size);
						}
					}

				});
			}//end of sliderFunc
			
			//windspd  风速
			setSlider('#windspd',sliderVal[0],'m/s','v',rules,'#windspd-num',0,100,100);
			//tempe  温度
			setSlider('#tempe',sliderVal[1],'°C','v',rules,'#tempe-num');
			//humidity  湿度
			setSlider('#humidity',sliderVal[2],'%','v',rules,'#humidity-num');
			//presure   气压
			setSlider('#presure',sliderVal[3],'Hpa','v',['|',9600,9700,9800,9900,10000,10100,10200],'#presure-num',9500,10200,100);
			//rain    降雨量
			setSlider('#rain',sliderVal[4],'mm','v',rules,'#rain-num');
			
			});//end of $()
		</script>
	</head>
	<body>
<div id="main">
<div id="echartArea" style="height:200px; width:200px;float: left;margin:10px 20px;"></div>
<div id="slideArea">
	<div id="windspd-div" class="slider-ver"> 
		<div class="headtxt"> 风速 </div>
		<div id="windspd-num" class="valtext">  </div>
		<input id="windspd" style="height:300px"  /> 
	</div>  
	<div id="tempe-div" class="slider-ver"> 
		<div class="headtxt"> 温度 </div>
		<div id="tempe-num" class="valtext">  </div>
		<input id="tempe" style="height:300px" /> 
	</div>
	<div id="humidity-div" class="slider-ver"> 
		<div class="headtxt"> 湿度 </div>
		<div id="humidity-num" class="valtext">  </div>
		<input id="humidity" style="height:300px" />  
	</div>
	<div id="presure-div" class="slider-ver">  
		<div class="headtxt"> 气压 </div>
		<div id="presure-num" class="valtext">  </div>
		<input id="presure" style="height:300px" /> 
	</div>
	<div id="rain-div" class="slider-ver">  
		<div class="headtxt"> 降水量 </div>
		<div id="rain-num" class="valtext">  </div>
		<input id="rain" style="height:300px" /> 
	</div>
</div><!--end of slideArea-->
</div><!--end of main-->
	</body>
</html>
